<template>
  <div>
    <div class="container"  :class="{'mobile_container': isMobile}">
      <topHeader></topHeader>

      <div class="banner">
        <img src="../assets/image/join_banner.jpg" alt="">
      </div>
      <div class="content wrapper">
        <div class="item">
          <div>
            <i class="icon"></i>
          </div>
          <p>招聘邮箱</p>
          <p>business@aoejy.com</p>
        </div>
        <div class="item">
          <div>
            <i class="icon"></i>
          </div>
          <p>联系电话</p>
          <p>17310323720</p>
        </div>
        <div class="item">
          <div>
            <i class="icon"></i>
          </div>
          <p>招聘地址</p>
          <p>北京市海淀区海淀西大街36号昊海楼7层</p>
        </div>
        <div class="clear"></div>
      </div>

      <copyRight></copyRight>
    </div>
  </div>
</template>

<style scoped>
  
  .mobile_container .content .item {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom:2.133333rem;
    padding: 0 .533333rem;
    box-sizing: border-box;
  }

  .container .banner {
    min-width: 1200px;
  }

  .mobile_container .banner {
    padding-top: 2.133333rem;
    min-width: 100% !important;
    width: 100%;
  }
  


  .container .banner img {
    width: 100%;
  }
  .container .content{
    margin: 140px auto 300px !important;
  }
  .mobile_container .content {
    margin: 1.333333rem auto 2.666667rem !important
  }
  .container .content .item{
    display: inline-block;
    text-align: center;
    margin-right: 185px;
    width: 270px;
    float: left;
  }
  .container .content .item > div {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
  }
  .container .content .item > div .icon {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
  }
  .container .content .item:nth-child(3) {
    margin-right: 0 !important;
  }

  .container .content .item i {
    display: inline-block;
  }
  .container .content .item p{
    color: #333;
    font-size: 24px;
    margin-top: 32px;
  }
  .container .content .item:nth-child(1) i {
    width: 106px;
    height: 75px;
    background: url('../assets/image/join_icon1.jpg') 0 0 no-repeat;
    background-size: 100%;
  }
  .container .content .item:nth-child(2) i {
    width: 90px;
    height: 96px;
    background: url('../assets/image/join_icon2.jpg') 0 0 no-repeat;
    background-size: 100%;
  }
  .container .content .item:nth-child(3) i {
    width: 70px;
    height: 94px;
    background: url('../assets/image/join_icon3.jpg') 0 0 no-repeat;
    background-size: 100%;
  }

</style>

<script>
import copyRight from './common/copyRight'
import topHeader from './common/topHeader'

export default {
  name: 'join',
  data() {
    return {
      tab_id: 0,
      isMobile: false,
    }
  },
  created() {
    this.isMobile = /(iPhone|iPad|iPod|iOS|Android)/i.test(window.navigator.userAgent);
  },
  methods: {
    
  },
  components: {
    copyRight,
    topHeader,
  }
}
</script>